import React, { Component, Fragment } from 'react';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import { actionCreators } from './store';
import moment from 'moment';

import {  Input, Button, Steps, Form, Select, Radio, InputNumber, TimePicker, DatePicker, 
          Typography, Row, Col, Switch, Divider, message, Breadcrumb } from 'antd';

import TableInput from './tableInput';
import ApiInput from './apiInput';

import FieldCalc from './fieldCalculation';
import FieldRepl from './fieldReplacement';
import FieldFilter from './fieldFilter';
import FieldMerge from './fieldMerge';

import './createTask.scss'

const { Title } = Typography;
const { Step } = Steps;
const { Option } = Select;
const format = 'HH:mm';

class createTask extends Component{
  state={
    visible: false,
    current: 0,
    frequency: undefined,
    timingType: undefined,
    inputMethod: undefined,
    basicInfo: {},
    inputInfo: {},
    outputInfo: {},
    dataProcess: {},
    config:undefined,//源数据库连接数据
    targetConfig: undefined,//目标数据库连接数据
    fieldProcess: {
      calc: false,//字段计算
      repl: false,//字段替换
      filter: false,//字段过滤
      merge: false,//字段合并
    },
    mConfig: undefined,//字段合并数据库连接数据
    timePicker: undefined,
    datePicker: undefined,
    inputCheckList: undefined,//源数据库输入字段
    mergeCheckList: [],//字段合并输入字段
  }

  handleClick = () => {
    this.setState({visible:true})
  };

  handleOk = (values) => {
    console.log("数据加工",values);
    let taskId = this.props.taskId;
    if(this.state.fieldProcess.calc){
      let data = JSON.stringify(values.calc);
      var calc = values.calc;
      let valueLength = calc.valueLength;
      calc.valueLength = `${valueLength}`;
      calc = JSON.stringify(calc);
      this.props.addCalculator(taskId,calc);
    }
    if(this.state.fieldProcess.repl){
      let data = JSON.stringify(values.replace);
      this.props.addReplacement(taskId,data);
    }
    if(this.state.fieldProcess.filter){
      let data = JSON.stringify(values.filter);
      this.props.addFilter(taskId,data);
    }
    if(this.state.fieldProcess.merge){
      let config = JSON.parse(values.databaseId);
      let databaseType = config.databaseType;
      let oriConfig = JSON.parse(this.state.inputInfo.originConfig);
      if(databaseType!==oriConfig.databaseType){
        message.info("合并组件需和表输入的数据库类型一致");
      }
      else{
        let taskId = this.props.taskId;
        let keyFields1 = "";
        let keyFields2 = "";
        if(values.keyField1){
          keyFields1 = values.keyField1.join(' ');
        }
        if(values.keyField2){
          keyFields2 = values.keyField2.join(' ');
        }
        let databaseId = config.databaseId;
        let joinTypes = values.joinTypes;
        let databaseSymbol = 2;
        let columns = "";
        if(values.mName){
          columns = values.mName[0];
          for(let i =1;i<values.mName.length;i++){
            columns += ` ${values.mName[i]}`
          }
        }
        let jsonString = {};
        jsonString.table = values.mTable;
        if(databaseType.toLowerCase()==="hbase"){
          jsonString.columnFamily = values.columnFamily;
        }
        jsonString.columns = columns;
        let jsonStr = JSON.stringify(jsonString);
        let params = {databaseSymbol,taskId,jsonStr};
        this.props.addMerge(taskId,joinTypes,keyFields1,keyFields2,databaseId,databaseType,params)
      }
    }
    this.props.commitTask(taskId,"admin");
    this.setState({
      visible: false,
      current: 0,
      frequency: undefined,
      timingType: undefined,
      inputMethod: undefined,
      basicInfo: {},
      inputInfo: {},
      outputInfo: {},
      dataProcess: {},
      config:undefined,//源数据库连接数据
      targetConfig: undefined,//目标数据库连接数据
      fieldProcess: {
        calc: false,//字段计算
        repl: false,//字段替换
        filter: false,//字段过滤
        merge: false,//字段合并
      },
      mConfig: undefined,//字段合并数据库连接数据
      timePicker: undefined,
      datePicker: undefined,
      inputCheckList: undefined,
      mergeCheckList: [],//字段合并输入字段
    });
    this.props.clearOriginTable();//清空表数据
    this.props.clearField();//清空字段数据
    this.props.clearMergeField();//清空合并字段数据
  }

  handleCancel = () => {
    this.setState({
      visible: false,
      current: 0,
      frequency: undefined,
      timingType: undefined,
      inputMethod: undefined,
      basicInfo: {},
      inputInfo: {},
      outputInfo: {},
      dataProcess: {},
      config:undefined,//源数据库连接数据
      targetConfig: undefined,//目标数据库连接数据
      fieldProcess: {
        calc: false,//字段计算
        repl: false,//字段替换
        filter: false,//字段过滤
        merge: false,//字段合并
      },
      mConfig: undefined,//字段合并数据库连接数据
      timePicker: undefined,
      datePicker: undefined,
      inputCheckList: undefined,
      mergeCheckList: undefined,//字段合并输入字段
    });
    this.formRef.current.resetFields();
    this.props.clearOriginTable();//清空表数据
    this.props.clearField();//清空字段数据
    this.props.clearMergeField();//清空合并字段数据
  };

  next() {
    let taskId = this.props.taskId;
    if(this.state.current===0){
      this.formRef.current.validateFields()
      .then( values => {
        console.log("基本属性",values);
        const current = this.state.current + 1;
        this.setState({ current, basicInfo: values });
        let userName = "admin";//待修改
        if(values.timingType&&values.timingType!=='0'){
          values.daily = this.state.timePicker;
        }
        if(values.timingType&&values.timingType==='3'){
          values.month = this.state.datePicker;
        }
        this.props.buildTask(values,userName);//建立任务&添加定时任务时间配置
      }).catch(info=>console.log('Validate Failed:', info))
    }else if(this.state.current===1){
      this.formRef.current.validateFields()
      .then( values => {
        console.log("采集配置",values);
        const current = this.state.current + 1;
        this.setState({ current, inputInfo: values });
        let databaseSymbol = 0;
        let taskId = this.props.taskId;
        let config = JSON.parse(values.originConfig);
        let databaseId = config.databaseId;
        let field = "";
        if(values.name){
          field = values.name.join(' ');
        }
        if(values.inputMethod==="表输入"){
          let databaseType = config.databaseType;
          let jsonString = {};
          if(databaseType.toLowerCase()==="hbase"){
            jsonString.columnFamily = values.columnFamily;
          }
          jsonString.table = values.oriTable;
          jsonString.columns = field;
          let jsonStr = JSON.stringify(jsonString); 
          let params = {databaseSymbol,taskId,jsonStr};
          this.props.addDatabaseEle(databaseType,params);
        }else{
          this.props.addWebApiEle(taskId,databaseSymbol,databaseId,field)
        }
      }).catch(info=>console.log('Validate Failed:', info))
    }else if(this.state.current===2){
      this.formRef.current.validateFields()
      .then( values => {
        console.log("数据存储/传输",values);
        const current = this.state.current + 1;
        this.setState({ current, outputInfo: values });
        let databaseSymbol = 1;
        let inField = "";
        if(this.state.inputInfo.name){
          inField = this.state.inputInfo.name.join(' ');
        }
        let config = JSON.parse(values.targetConfig);
        let databaseType = config.databaseType;
        let jsonString = {};
        jsonString.table = values.tarTable;
        if(databaseType.toLowerCase()==="hbase"){
          jsonString.columnFamily = values.columnFamily;
          jsonString.columns = inField;
        }
        else if(databaseType.toLowerCase()==="mongodb"){
          jsonString.columns = inField;
        }
        else{
          let outField = "";
          let upOrNotStr = "";
          if(this.props.outputField.length>0){
            outField = this.props.outputField.join(' ');
          }
          jsonString.streamStr = inField;
          jsonString.lookupStr = outField;
          upOrNotStr = values.upOrNotStr==="Y"? new Array(this.props.outputField.length).fill('Y'):  new Array(this.props.outputField.length).fill('N');
          upOrNotStr = upOrNotStr.join(' ');
          // let upOrNotStr = `${values.upOrNotStr}`;
          // for(let i=1;i<outField.length;i++){
          //   upOrNotStr+=` ${values.upOrNotStr}`;
          // }
          jsonString.upOrNotStr = upOrNotStr;
        }
        //let isAutoCreateTable = values.autoCreate;
        let jsonStr = JSON.stringify(jsonString); 
        let taskId = this.props.taskId;
        let databaseId = config.databaseId;
        let params = {databaseSymbol,taskId,jsonStr};
        this.props.addTarConfig(taskId,databaseId);
        this.props.addDatabaseEle(databaseType,params);
      }).catch(info=>console.log('Validate Failed:', info))
    }
  }

  prev() {//返回上一步
    const current = this.state.current - 1;
    this.setState({ current });
  }

  selectFrequency = (value) => {//选择任务频率
    this.setState({frequency: value});
  }

  selectTimingType = (e) => {//选择重复任务时间类型
    this.setState({timingType: e.target.value});
  }

  selectTimePicker = (time,timeString) => {
    this.setState({timePicker:timeString});
  }

  selectDataPicker = (date, dateString) => {
    this.setState({datePicker:dateString});
  }

  renderTiming = () => {//根据任务时间类型渲染不同的选项
    switch(this.state.timingType){
      case "0":
        return <Form.Item label="选择时间" className="complexCp">
          <Form.Item name="minutes" style={{ display: 'inline-block'}}
          rules={[
          {
            required: true,
            message: '请填写时间！',
          },]}>
            <InputNumber style={{width: '100%'}} min={0} max={60}/>
          </Form.Item>分钟
          <Form.Item name="seconds" style={{ display: 'inline-block'}}
          rules={[
          {
            required: true,
            message: '请填写时间！',
          },]}>
            <InputNumber style={{width: '100%'}} min={0} max={60}/>
          </Form.Item>秒
        </Form.Item>
      case "1":
        return <Form.Item label="选择时间" name="daily"
          rules={[
          {
            required: true,
            message: '请填写时间！',
          },]}>
          <TimePicker format={format} onChange={this.selectTimePicker}/>
        </Form.Item>
      case "2":
        return <Form.Item label="选择时间" className="complexCp">
          <Form.Item name="day" style={{ display: 'inline-block'}}
          rules={[
          {
            required: true,
            message: '请选择时间！',
          },]}>
            <Select placeholder="按周">
              <Option value="1">周一</Option>
              <Option value="2">周二</Option>
              <Option value="3">周三</Option>
              <Option value="4">周四</Option>
              <Option value="5">周五</Option>
              <Option value="6">周六</Option>
              <Option value="7">周日</Option>
            </Select>
          </Form.Item>
          <Form.Item name="daily" style={{ display: 'inline-block'}}
          rules={[
          {
            required: true,
            message: '请填写时间！',
          },]}>
            <TimePicker format={format} onChange={this.selectTimePicker}/>
          </Form.Item>
        </Form.Item>
      case "3":
        return <Form.Item label="选择时间" className="complexCp">
          <Form.Item name="month" style={{ display: 'inline-block'}}
          rules={[
          {
            required: true,
            message: '请选择时间！',
          },]}>
            <DatePicker onChange={this.selectDataPicker}/>
          </Form.Item>
          <Form.Item name="daily" style={{ display: 'inline-block'}}
          rules={[
          {
            required: true,
            message: '请填写时间！',
          },]}>
            <TimePicker format={format} onChange={this.selectTimePicker}/>
          </Form.Item>
        </Form.Item>
      default: return null;
    }
  }

  selectInputMethod = (value) => {//选择输入方式
    this.setState({inputMethod: value});
    this.props.clearOriginTable();//清空源数据库表
    this.props.clearField();//清空字段数据
    this.formRef.current.setFieldsValue({oriTable:undefined, name:undefined, columnFamily:undefined, originConfig:undefined});
  }

  setConfig = (config) => {
    this.setState({config});
  }

  setMergeConfig = (mConfig) => {
    this.setState({mConfig});
  }

  selectTargetConfig = (value) => {
    let config = JSON.parse(value);
    this.setState({targetConfig:config});
    this.props.getTargetTable(config.databaseType,{id:config.databaseId});
  }

  selectTargetTable = (value) => {
    this.formRef.current.setFieldsValue({inputTarTable: value});
  }

  changeOutputField = (e,index) => {//编辑输出流字段
    if(this.props.outputField[index]!==e.target.value){
      let outField = this.props.outputField;
      outField[index] = e.target.value;
      this.props.changeOutputField(outField);
    }
  }

  changeSwitch = (checked,type) => {
    let process = this.state.fieldProcess;
    switch(type){
      case "calc": 
        process.calc = checked;
        this.setState({fieldProcess:process});break;
      case "repl":
        process.repl = checked;
        this.setState({fieldProcess:process});break;
      case "filter":
        process.filter = checked;
        this.setState({fieldProcess:process});break;
      case "merge":
        process.merge = checked;
        this.setState({fieldProcess:process});break;
      default: break;
    }
  }

  componentDidMount(){
    let userName = "admin";
    this.props.getBriefConfig(userName);
    this.props.getBriefWebConfig(userName);
  }

  setInputCheckList = (inputCheckList) => {
    this.setState({inputCheckList});
  }

  setMergeCheckList = (mergeCheckList) => {
    this.setState({mergeCheckList});
  }

  formRef = React.createRef();
  render(){
    const { current, frequency, timingType } = this.state;
    const steps = [
      {
        title: '基本属性',
        content: 
        <div style={{marginTop:12}}>
          <Form.Item label="服务名称" name="taskName"
          rules={[
            {
              required: true,
              message: '请输入服务名称！',
            },]}>
              <Input placeholder="请输入服务名称"/>
          </Form.Item>
          <Form.Item label="交换频率" name="taskType"
          rules={[
            {
              required: true,
              message: '请选择交换频率！',
            },]}>
              <Select placeholder="请选择交换频率" onChange={this.selectFrequency}>
                <Option value="0">执行一次</Option>
                <Option value="1">定时任务</Option>
              </Select>
          </Form.Item>
          {
            frequency&&frequency==="1"?
            <Fragment>
              <Form.Item label="是否重复" name="repeat"
              rules={[
                {
                  required: true,
                  message: '请选择任务是否重复！',
                },]}>
                <Radio.Group>
                  <Radio value="0">不重复</Radio>
                  <Radio value="1">重复</Radio>
                </Radio.Group>
              </Form.Item>
              <Form.Item label="定时类型" name="timingType"
              rules={[
                {
                  required: true,
                  message: '请选择定时类型！',
                },]}>
                <Radio.Group onChange={this.selectTimingType}>
                  <Radio value="0">时间</Radio>
                  <Radio value="1">每天</Radio>
                  <Radio value="2">每周</Radio>
                  <Radio value="3">每月</Radio>
                </Radio.Group>
              </Form.Item>
              {timingType?this.renderTiming():null}
            </Fragment>:null
          }
        </div>,
      },
      {
        title: '采集配置',
        content: 
        <div style={{marginTop:12}}>
          {/* <Form.Item label="抽取方式" name="taskMethod"
          rules={[
            {
              required: true,
              message: '请输入服务名称！',
            },]}
          initialValue="增量抽取">
              <Select disabled>
                <Option value="增量抽取">增量抽取</Option>
              </Select>
          </Form.Item> */}                
          <Form.Item label="输入方式" name="inputMethod"
          rules={[
            {
              required: true,
              message: '请选择输入方式！',
            },]}>
              <Select placeholder="请选择输入方式" onChange={this.selectInputMethod}>
                <Option value="表输入">表输入</Option>
                <Option value="接口输入">接口输入</Option>
              </Select>
          </Form.Item>
          {
            this.state.inputMethod==="表输入"?
            <TableInput formRef={this.formRef} setConfig={this.setConfig} config={this.state.config} inputCheckList={this.state.inputCheckList} setInputCheckList={this.setInputCheckList}/>:
            (this.state.inputMethod==="接口输入"?
            <ApiInput formRef={this.formRef} inputCheckList={this.state.inputCheckList} setInputCheckList={this.setInputCheckList}/>:null)
          }
        </div>,
      },
      {
        title: '数据存储/传输',
        content: 
        <div style={{marginTop:12}}>
          <Form.Item label="数据库连接" name="targetConfig"
          rules={[{
          required: true,
          message: '请选择数据库连接！',
          },]}>
            <Select placeholder="请选择数据库连接" onChange={this.selectTargetConfig}>
              {
                this.props.briefConfig.map(config => (
                  <Option key={config.id} value={JSON.stringify(config)}>{config.configName}</Option>
                ))
              }
            </Select>
          </Form.Item>
          {
            this.state.targetConfig?
            <Fragment>
              {/* <Form.Item label="自动建表" name="autoCreate"
              rules={[{
              required: true,
              message: '请选择是否自动建表！',
              },]}
              initialValue={true}>
                <Radio.Group>
                  <Radio value={true}>是</Radio>
                  <Radio value={false}>否</Radio>
                </Radio.Group>
              </Form.Item> */}
              <Form.Item label="选择表名" name="tarTable"
              rules={[{
                required: true,
                message: "请选择表名！",
              },]}>
                <Select placeholder="请选择表名" onChange={this.selectTargetTable}
                showSearch
                filterOption={(input, option) =>
                  option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                }>
                  {
                    this.props.tarTable.map(table => (
                      <Option value={table}>{table}</Option>
                    ))
                  }
                </Select>
              </Form.Item>
              {/* <Form.Item label="输入表名" name="inputTarTable"
              rules={[{
                required: true,
                message: "请输入表名！",
              },]}>
                <Input placeholder="输入的表名将替换选择的"/>
              </Form.Item> */}
              <Form.Item label="是否更新" name="upOrNotStr"
              rules={[{
              required: true,
              message: '请选择是否更新！',
              },]}
              initialValue="N">
                <Radio.Group>
                  <Radio value="Y">是</Radio>
                  <Radio value="N">否</Radio>
                </Radio.Group>
              </Form.Item>
              {
                this.state.targetConfig.databaseType.toLowerCase()==="mongodb"||this.state.targetConfig.databaseType.toLowerCase()==="hbase"?
                <Fragment>
                  <div style={{color: 'rgba(0,0,0,0.85)'}}>所有字段:</div>
                  {
                    this.props.inputField.map((item,index)=>(
                      <span style={{marginRight:8}}>{item.fieldName}</span>
                    ))
                  }
                </Fragment>:
                <Fragment>
                  <div style={{color: 'rgba(0,0,0,0.85)'}}>字段映射:</div>
                  <span>
                    <Row style={{marginBottom:12}}>
                      <Col span={8} style={{textAlign:"center"}}>输入流字段</Col>
                      <Col span={8} style={{textAlign:"center"}}>输出流字段</Col>
                      <Col span={8} style={{textAlign:"center"}}>来源</Col>
                    </Row>
                    {
                      this.props.inputField.map((item,index)=>(
                        <Row>
                          <Col span={8}><Input defaultValue={item.fieldName} disabled/></Col>
                          <Col span={8}>
                            <Input defaultValue={this.props.outputField[index]} onChange={e=>this.changeOutputField(e,index)}/>
                          </Col>
                          <Col span={8}><Input  defaultValue={item.from==='input'?"表输入":(item.from==='web api'?"接口输入":"")} disabled/></Col>
                        </Row>
                      ))
                    }
                  </span>
                </Fragment>
              }
            </Fragment>:null
          }
        </div>,
      },
      {
        title: '数据加工',
        content: 
        <div style={{marginTop:12}}>
          <div>
            <Title level={4} style={{display:'inline-block'}}>字段计算</Title>
            <Switch style={{marginLeft: 8, marginBottom: 5}} onChange={checked=>this.changeSwitch(checked,"calc")} checked={this.state.fieldProcess.calc}/>
            {
              this.state.fieldProcess.calc?<FieldCalc/>:null
            }
          </div>
          <Divider style={{margin: '12px 0'}}/>
          <div>
            <Title level={4} style={{display:'inline-block'}}>字段替换</Title>
            <Switch style={{marginLeft: 8, marginBottom: 5}} onChange={checked=>this.changeSwitch(checked,"repl")} checked={this.state.fieldProcess.repl}/>
            {
              this.state.fieldProcess.repl?<FieldRepl/>:null
            }
          </div>
          <Divider style={{margin: '12px 0'}}/>
          <div>
            <Title level={4} style={{display:'inline-block'}}>字段过滤</Title>
            <Switch style={{marginLeft: 8, marginBottom: 5}} onChange={checked=>this.changeSwitch(checked,"filter")} checked={this.state.fieldProcess.filter}/>
            {
              this.state.fieldProcess.filter?<FieldFilter/>:null
            }
          </div>
          <Divider style={{margin: '12px 0'}}/>
          <div>
            <Title level={4} style={{display:'inline-block'}}>字段合并</Title>
            {
              this.state.inputMethod==="表输入"?
              <Switch style={{marginLeft: 8, marginBottom: 5}} onChange={checked=>this.changeSwitch(checked,"merge")} checked={this.state.fieldProcess.merge}/>:null
            }
            <span style={{marginLeft:8}}>仅在采集配置输入方式为表输入时支持字段合并</span>
            {
              this.state.fieldProcess.merge?
              <FieldMerge formRef={this.formRef} setMergeConfig={this.setMergeConfig} mConfig={this.state.mConfig} inputInfo={this.state.inputInfo} inputConfig={this.state.config} mergeCheckList={this.state.mergeCheckList} setMergeCheckList={this.setMergeCheckList}/>:null
            }
          </div>
        </div>,
      },
    ];
    return (
      <div className='content' >
        <Breadcrumb separator=">">
            <Breadcrumb.Item href="#/dataCollection/task">数据采集任务列表</Breadcrumb.Item>
            <Breadcrumb.Item>任务信息监视</Breadcrumb.Item>
        </Breadcrumb>
        <div className="steps">
        <Steps current={current}>
            {steps.map(item => (
              <Step key={item.title} title={item.title} />
            ))}
          </Steps>
          <Form name="basic" ref={this.formRef}>
            <div className="steps-content">{steps[current].content}</div>
          </Form>
          {current < steps.length - 1 && (
            <Button type="primary" onClick={() => this.next()}>
              下一步
            </Button>
          )}
          {current === steps.length - 1 && (
            <Button type="primary" onClick={() => {
                this.formRef.current
                  .validateFields()
                  .then(values => {
                    this.formRef.current.resetFields();
                    this.handleOk(values);
                  })
                  .catch(info => {
                    console.log('Validate Failed:', info);
                  });
              }}>
              完成
            </Button>
          )}
          {current > 0 && (
            <Button style={{ margin: '0 8px' }} onClick={() => this.prev()}>
              上一步
            </Button>
          )}
        </div>
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    briefConfig: state.getIn(['createTask','briefConfig']).toJS(),
    briefWebConfig: state.getIn(['createTask','briefWebConfig']).toJS(),
    tarTable: state.getIn(['createTask','tarTable']).toJS(),
    taskId: state.getIn(['createTask','taskId']),
    inputField: state.getIn(['createTask','inputField']).toJS(),
    outputField: state.getIn(['createTask','outputField']).toJS(),
  }
}

const mapDispatchToProps = (dispatch) => ({
  getBriefConfig(userName){
    dispatch(actionCreators.getBriefConfigOperation(userName));
  },
  getBriefWebConfig(userName){
    dispatch(actionCreators.getBriefWebConfigOperation(userName));
  },
  clearOriginTable(){
    dispatch(actionCreators.clearOriginTableOperation());
  },
  clearField(){
    dispatch(actionCreators.clearFieldOperation());
  },
  getTargetTable(databaseType,params){
    dispatch(actionCreators.getTargetTableOperation(databaseType,params));
  },
  clearTargetTable(){
    dispatch(actionCreators.clearTargetTableOperation());
  },
  getInputField(taskId){
    dispatch(actionCreators.getInputFieldOperation(taskId));
  },
  changeOutputField(outputField){
    dispatch(actionCreators.changeOutputFieldOperation(outputField));
  },
  clearMergeField(){
    dispatch(actionCreators.clearMergeFieldOperation());
  },
  //创建采集逻辑流程
  buildTask(values,userName){//建立任务&添加定时任务配置
    dispatch(actionCreators.buildTaskOperation(values,userName));
  },
  addTarConfig(taskId,databaseId){
    dispatch(actionCreators.addTarConfigOperation(taskId,databaseId));
  },
  commitTask(taskId,userName){
    dispatch(actionCreators.commitTaskOperation(taskId,userName));
  },
  addDatabaseEle(databaseType,params){
    dispatch(actionCreators.addDatabaseEleOperation(databaseType,params));
  },
  addWebApiEle(taskId,databaseSymbol,databaseId,fieldNames){
    dispatch(actionCreators.addWebApiEleOperation(taskId,databaseSymbol,databaseId,fieldNames));
  },
  addCalculator(taskId,data){
    dispatch(actionCreators.addCalculatorOperation(taskId,data));
  },
  addFilter(taskId,data){
    dispatch(actionCreators.addFilterOperation(taskId,data));
  },
  addMerge(taskId,joinTypes,keyFields1,keyFields2,databaseId,databaseType,params){
    dispatch(actionCreators.addMergeOperation(taskId,joinTypes,keyFields1,keyFields2,databaseId,databaseType,params));
  },
  addReplacement(taskId,data){
    dispatch(actionCreators.addReplacementOperation(taskId,data));
  },
})

export default connect(mapStateToProps, mapDispatchToProps)(createTask);